<template>
   <div class="container-fluid">
    <div class="card">
      <div class="card-header">
        <h2>订单列表</h2>
      </div>
      <div class="card-body">
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              <th scope="col">订单号</th>
              <th scope="col">购票人信息</th>
              <th scope="col">购票电影及场次</th>
              <th scope="col">座位号</th>
              <th scope="col">总价</th>
              <th scope="col">订单状态</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in orders" :key="order.orderId">
              <td>{{ order.orderId }}</td>
              <td>{{ order.buyerInfo }}</td>
              <td>{{ order.movieAndSession }}</td>
              <td>{{ order.seatNumber }}</td>
              <td>{{ order.totalPrice }}</td>
              <td>{{ order.status }}</td>
              <td>
              
                <button
                  type="button"
                  class="btn btn-sm btn-outline-primary"
                  @click="viewOrderDetails(order.orderId)"
                >
                  查看详情
                </button>
                <button
                  type="button"
                  v-if="order.status === '待支付'"
                  class="btn btn-sm btn-outline-success"
                  @click="confirmPayment(order.orderId)"
                >
                  确认支付
                </button>
                <button
                  type="button"
                  v-if="order.status === '待支付'"
                  class="btn btn-sm btn-outline-danger"
                  @click="cancelOrder(order.orderId)"
                >
                  取消订单
                </button>
                <button
                  type="button"
                  v-if="order.status === '已取消'"
                  class="btn btn-sm btn-outline-warning"
                  @click="refund(order.orderId)"
                >
                  退款处理
                </button>
                <button
                  type="button"
                  v-if="!order.status.startsWith('已取消') &&!order.status.startsWith('退款已处理')"
                  class="btn btn-sm btn-outline-info"
                  @click="showEditModal(order.orderId)"
                >
                  修改订单
                </button>                <button
                  type="button"
                  v-if="!order.status.startsWith('已取消') &&!order.status.startsWith('退款已处理')"
                  class="btn btn-sm btn-outline-danger"
                  @click="deleteOrder(order.orderId)"
                >
                  删除订单
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      v-if="showOrderDetails"
      class="modal fade"
      id="orderDetailsModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="orderDetailsModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="orderDetailsModalLabel">订单详情</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
              @click="closeOrderDetails"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p><strong>订单号：</strong> {{ selectedOrder.orderId }}</p>
            <p><strong>购票人信息：</strong> {{ selectedOrder.buyerInfo }}</p>
            <p><strong>购票电影及场次：</strong> {{ selectedOrder.movieAndSession }}</p>
            <p><strong>座位号：</strong> {{ selectedOrder.seatNumber }}</p>
            <p><strong>总价：</strong> {{ selectedOrder.totalPrice }}</p>
            <p><strong>订单状态：</strong> {{ selectedOrder.status }}</p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
              @click="closeOrderDetails"
            >
              关闭
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="showRefundConfirmation"
      class="modal fade"
      id="refundConfirmationModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="refundConfirmationModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="refundConfirmationModalLabel">退款处理确认</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
              @click="closeRefundConfirmation"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>是否确认对订单 <strong>{{ refundOrder.orderId }}</strong> 进行退款处理？</p>
            <p>订单金额： <strong>{{ refundOrder.totalPrice }}</strong></p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
              @click="closeRefundConfirmation"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              @click="processRefund(refundOrder.orderId)"
            >
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="showEditConfirmation"
      class="modal fade"
      id="editConfirmationModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="editConfirmationModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="editConfirmationModalLabel">修改订单</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
              @click="closeEditConfirmation"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="editBuyerInfo">购票人信息</label>
                <input type="text" class="form-control" id="editBuyerInfo" v-model="editOrder.buyerInfo">
              </div>
              <div class="form-group">
                <label for="editMovieAndSession">购票电影及场次</label>
                <input type="text" class="form-control" id="editMovieAndSession" v-model="editOrder.movieAndSession">
              </div>
              <div class="form-group">
                <label for="editSeatNumber">座位号</label>
                <input type="text" class="form-control" id="editSeatNumber" v-model="editOrder.seatNumber">
              </div>
              <div class="form-group">
                <label for="editTotalPrice">总价</label>
                <input type="number" class="form-control" id="editTotalPrice" v-model="editOrder.totalPrice">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
              @click="closeEditConfirmation"
            >
              取消
            </button>
            <button
              type="button"
              class="btn btn-primary"
              @click="updateOrder(editOrder.orderId)"
            >
              确认修改
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <h2>新增订单</h2>
      </div>
      <div class="card-body">
        <form>
          <div class="form-group">
            <label for="newOrderId">订单号</label>
            <input type="text" class="form-control" id="newOrderId" v-model="newOrder.orderId">
          </div>
          <div class="form-group">
            <label for="newBuyerInfo">购票人信息</label>
            <input type="text" class="form-control" id="newBuyerInfo" v-model="newOrder.buyerInfo">
          </div>
          <div class="form-group">
            <label for="newMovieAndSession">购票电影及场次</label>
            <input type="text" class="form-control" id="newMovieAndSession" v-model="newOrder.movieAndSession">
          </div>
          <div class="form-group">
            <label for="newSeatNumber">座位号</label>
            <input type="text" class="form-control" id="newSeatNumber" v-model="newOrder.seatNumber">
          </div>
          <div class="form-group">
            <label for="newTotalPrice">总价</label>
            <input type="number" class="form-control" id="newTotalPrice" v-model="newOrder.totalPrice">
          </div>
          <button type="button" class="btn btn-primary" @click="addOrder">提交</button>
        </form>
      </div>
    </div>
  </div>
  </template>
  
  <script>
import { ref } from 'vue';

export default {
  setup() {
    const orders = ref([
      {
        orderId: '1',
        buyerInfo: '张三',
        movieAndSession: '《毒液：最后一舞》 场次：2024-10-31 19:00',
        seatNumber: 'A1, A2',
        totalPrice: 100,
        status: '待支付'
      },
      {
        orderId: '2',
        buyerInfo: '李四',
        movieAndSession: '《爱你很久很久》 场次：2024-11-01 15:30',
        seatNumber: 'B3, B4',
        totalPrice: 80,
        status: '已支付'
      },
      {
        orderId: '3',
        buyerInfo: '王五',
        movieAndSession: '《志愿军：存亡之战》 场次：2024-11-02 20:00',
        seatNumber: 'C5, C6',
        totalPrice: 120,
        status: '已取消'
      }
    ]);
    const selectedOrder = ref(null);
    const showOrderDetails = ref(false);
    const refundOrder = ref(null);
    const showRefundConfirmation = ref(false);
    const editOrder = ref(null);
    const showEditConfirmation = ref(false);
    const newOrder = ref({
      orderId: '',
      buyerInfo: '',
      movieAndSession: '',
      seatNumber: '',
      totalPrice: '',
      status: '待支付'
    });

    const viewOrderDetails = (orderId) => {
      const order = orders.value.find(order => order.orderId === orderId);
      selectedOrder.value = order;
      showOrderDetails.value = true;
    };

    const confirmPayment = (orderId) => {
      const orderIndex = orders.value.findIndex(order => order.orderId === orderId);
      if (orderIndex!== -1) {
        orders.value[orderIndex].status = '已支付';
      }
    };

    const cancelOrder = (orderId) => {
      const orderIndex = orders.value.findIndex(order => order.orderId === orderId);
      if (orderIndex!== -1) {
        orders.value[orderIndex].status = '已取消';
      }
    };

    const refund = (orderId) => {
      const order = orders.value.find(order => order.orderId === orderId);
      refundOrder.value = order;
      showRefundConfirmation.value = true;
    };
    const closeOrderDetails = () => {
      showOrderDetails.value = false;
    };

    const closeRefundConfirmation = () => {
      showRefundConfirmation.value = false;
    };

    const processRefund = (orderId) => {
      const orderIndex = orders.value.findIndex(order => order.orderId === orderId);
      if (orderIndex!== -1) {
        orders.value[orderIndex].status = '退款已处理';
      }
      closeRefundConfirmation.value = false;
    };
    const showEditModal = (orderId) => {
      const order = orders.value.find(order => order.orderId === orderId);
      editOrder.value = {...order };
      showEditConfirmation.value = true;
    };
    const closeEditConfirmation = () => {
      showEditConfirmation.value = false;
    };

    // 更新订单的方法
    const updateOrder = (orderId) => {
      const orderIndex = orders.value.findIndex(order => order.orderId === orderId);
      if (orderIndex!== -1) {
        orders.value[orderIndex] = {...editOrder.value };
      }
      closeEditConfirmation();
    };

    // 删除订单的方法
    const deleteOrder = (orderId) => {
      const confirmDelete = window.confirm('确定要删除该订单吗？');
      if (confirmDelete) {
        const orderIndex = orders.value.findIndex(order => order.orderId === orderId);
        if (orderIndex!== -1) {
          orders.value.splice(orderIndex, 1);
        }
      }
    };

    const addOrder = () => {

      if (!newOrder.value.orderId) {
        alert('请输入订单号');
        return;
      }
      if (!newOrder.value.buyerInfo ||!newOrder.value.movieAndSession ||!newOrder.value.seatNumber || isNaN(newOrder.value.totalPrice)) {
        alert('请填写完整且正确的订单信息');
        return;
      }
      // 使用用户输入的订单号
      const newOrderId = newOrder.value.orderId;
      newOrder.value.orderId = newOrderId;
      orders.value.push({...newOrder.value });
      // 重置 newOrder 为初始状态，但不包括订单号输入框（因为可能用户还想继续添加订单，保留订单号输入框的值方便输入）
      newOrder.value = {
        buyerInfo: '',
        movieAndSession: '',
        seatNumber: '',
        totalPrice: '',
        status: '待支付'
      };
    };

    return {
      orders,
      viewOrderDetails,
      confirmPayment,
      cancelOrder,
      refund,
      showOrderDetails,
      selectedOrder,
      closeOrderDetails,
      refundOrder,
      showRefundConfirmation,
      closeRefundConfirmation,
      processRefund,
      showEditModal,
      editOrder,
      showEditConfirmation,
      closeEditConfirmation,
      updateOrder,
      deleteOrder,
      newOrder,
      addOrder
    };
  }
};
  </script>
  
<style scoped>
.container-fluid {
  padding: 20px;
  background-color: #f8f9fa;
}

h1 {
  font-size: 36px;
  color: #343a40;
  margin-bottom: 30px;
}

.card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.card-header h2 {
  font-size: 24px;
  color: #343a40;
}

table.table {
  border-collapse: collapse;
  width: 100%;
}

table.table thead th {
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
  padding: 12px;
}

table.table tbody td {
  border: 1px solid #dee2e6;
  padding: 12px;
}

button.btn {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 5px;
}

button.btn-outline-primary {
  color: #007bff;
  border: 1px solid #007bff;
}

button.btn-outline-success {
  color: #28a745;
  border: 1px solid #28a745;
}

button.btn-outline-danger {
  color: #dc3545;
  border: 1px solid #dc3545;
}

button.btn-outline-warning {
  color: #ffc107;
  border: 1px solid #ffc107;
}

button.btn-outline-info {
  color: #17a2b8;
  border: 1px solid #17a2b8;
}

button.btn-outline-primary:hover {
  background-color: #007bff;
  color: #fff;
}

button.btn-outline-success:hover {
  background-color: #28a745;
  color: #fff;
}

button.btn-outline-danger:hover {
  background-color: #dc3545;
  color: #fff;
}

button.btn-outline-warning:hover {
  background-color: #ffc107;
  color: #343a40;
}

button.btn-outline-info:hover {
  background-color: #17a2b8;
  color: #fff;
}

.modal-content {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.modal-title {
  font-size: 24px;
  color: #343a40;
}

.modal-footer button.btn-secondary {
  color: #6c757d;
  border: 1px solid #6c757d;
}

.modal-footer button.btn-primary {
  color: #fff;
  background-color: #007bff;
  border: 1px solid #007bff;
}

.form-group label {
  font-weight: bold;
}

.form-control {
  border-radius: 5px;
}
</style>